import { FC, memo } from 'react';
import styles from './cardStatusBlock.module.less';

interface ICardStatusBlock {
  cards: { status: string }[] | undefined;
}

const CardStatusBlock: FC<ICardStatusBlock> = (props) => {
  if (!props.cards) {
    return null;
  }
  return (
    <div className={`flex`}>
      {props.cards.map((c, index) => {
        return (
          <div
            key={index}
            className={`${styles.cardStatus} ${styles[c.status]}`}
          ></div>
        );
      })}
    </div>
  );
};

export default memo(CardStatusBlock);
